<template>
  <div
    :class="{
      backtop_container: true,
      elevator_fix: isFixed,
      elevator_recommend: isFixed,
    }"
  >
    <!-- <div class="robot">
      <el-popover
        placement="bottom"
        trigger="manual"
        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
        v-model="robotVisible"
      >
        <ChatBot :dataList="chatBotData" @handleIsShow="handleIsShow" />
      </el-popover>
    </div> -->
    <div class="rig-top">
      <el-popover
        placement="left"
        title="客服电话："
        width="180"
        trigger="manual"
        v-model="visible"
      >
        <div class="ipnoe">
          <div class="ip-em">0731-89799889</div>
          <div class="ip-em">17773174867</div>
        </div>
      </el-popover>
    </div>
    <div class="rig-bom">
      <el-popover
        placement="right-start"
        title="小程序："
        width="180"
        trigger="manual"
        v-model="imgVisible"
      >
        <div class="ewm">
          <img
            src="../assets/images/ewm.jpg"
            alt=""
            style="width: 100%; height: 100%"
          />
        </div>
      </el-popover>
    </div>
    <div>
      <div class="container-box" @mouseenter="visible = true" @mouseleave="visible=false">
        <div class="icon">
          <img
            src="../assets/images/mobile.png"
            style="width: 100%; height: 100%"
            alt=""
          />
        </div>
        <div>客服电话</div>
      </div>
      <div class="container-box" @mouseenter="imgVisible = true" @mouseleave="imgVisible=false">
        <div class="icon">
          <img
            src="../assets/images/xcx.png"
            style="width: 100%; height: 100%"
            alt=""
          />
        </div>
        <div>小程序</div>
      </div>
      <div
        class="container-box"
        style="width: 60px"
        @click="handleOpen"
      >
        <div class="icon">
          <img
            src="../assets/images/gpt.png"
            style="width: 100%; height: 100%"
            alt=""
          />
        </div>
        <div style="width: 60px">区域负责人</div>
      </div>
    </div>

    <div>
      <el-backtop :visibility-height="10" :right="20">
        <div
          style="
             {
              width: 100%;
              background: #fff !important;
              box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
              text-align: center;
              line-height: 40px;
              color: red;
              margin-top: 100px;
            }
          "
        >
          <div class="gotop-img">
            <img
              src="../assets/images/backtop.png"
              style="width: 100%; height: 100%"
              alt=""
            />
          </div>
          <div class="gotop">回到顶部</div>
        </div>
      </el-backtop>
    </div>
  </div>
</template>
<script>
// import { robotAnswer } from "@/api/homePage.js";
// import ChatBot from "./Chatbot.vue";
// import { STATUS_CODE_OK } from "@/config";
export default {
  // 右侧浮动栏组件
  name: "MFiexdBox",
  data() {
    return {
      visible: false,
      imgVisible: false,
      isFixed: false,
      chatBotData: [],
      dataList: [
        {
          id: 1,
          text: "客服电话",
          icon: "el-icon-phone",
        },
        {
          id: 2,
          text: "小程序",
          icon: "el-icon-s-help",
        },
      ], // 右侧浮动栏数据
    };
  },
  created() {
    this.handlekefu();
    // this.handleRobotAnswer();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleOpen() {
      this.$emit("handleIsShow", true);
      this.$emit("handleBig", "10px");
    },
    // async handleRobotAnswer() {
    //   let { data } = await robotAnswer();
    //   if (data.code == STATUS_CODE_OK) {
    //     this.chatBotData = data.data;
    //   }
    // },
    // // 关闭弹窗通信
    // handleIsShow(prop) {
    //   this.robotVisible = prop;
    // },
    handleScroll() {
      const scrollPosition =
        window.scrollY || document.documentElement.scrollTop;
      if (scrollPosition > 600) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    handlekefu() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?8aad7daa9d866f8d369b57fbca3768f8";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    },
  },
  // components: {
  //   ChatBot,
  // },
};
</script>
<style scoped lang="scss">
::v-deep .el-backtop {
  bottom: auto !important;
  height: 0px;
}

.elevator_recommend {
  -webkit-transform: translateY(60px);
  -ms-transform: translateY(60px);
  transform: translateY(60px);
}
.elevator_fix {
  position: fixed !important;
  top: 70px !important;
  -webkit-animation: eleShow 0.5s ease both !important;
  animation: eleShow 0.5s ease both !important;
}
.backtop_container {
  .rig-top {
    ::v-deep .el-popover {
      right: -190px;
      top: 0px;
    }
  }
  .robot {
    ::v-deep .el-popover {
      right: 85px;
      bottom: 0px;
    }
  }
  .rig-bom {
    ::v-deep .el-popover {
      right: -190px;
      top: 120px;
    }
  }
  .ipnoe {
    text-align: center;
    .ip-em {
      padding: 5px 0px;
    }
  }
  .gotop-img {
    height: 30px;
    width: 30px;
    margin: 0px auto;
  }
  .gotop {
    width: 80px;
    font-size: 14px;
  }
  height: 286px;
  margin-top: -50px;
  margin-left: 1230px;
  position: sticky;
  bottom: 66%;
  transform: translate(50%, 50%);
  width: 80px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 6px;
  .container-box {
    padding: 20px 0px;
    width: 60px;
    text-align: center;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    cursor: pointer;
    .icon {
      font-size: 24px;
      width: 30px;
      height: 30px;
      margin: 0px auto 10px;
    }
  }
}
</style>
